<div [@routerTransition]>
    <div class="m-subheader ">
        <div class="row align-items-center">
            <div class="mr-auto col-sm-12 col-md-6">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>{{l("VisualSettings")}}</span>
                </h3>
                <span class="m-section__sub">
                    {{l("UiCustomizationHeaderInfo")}}
                </span>
            </div>
            <div class="col-sm-12 col-md-6 text-right">
                <button *ngIf="isGranted('Pages.Administration.UiCustomization')" (click)="updateDefaultUiManagementSettings()" class="btn btn-primary"><i class="fa fa-floppy-o"></i> {{l("SaveAsSystemDefault")}}</button>
                <button *ngIf="!isGranted('Pages.Administration.UiCustomization')" (click)="updateUiManagementSettings()" class="btn btn-primary"><i class="fa fa-floppy-o"></i> {{l("Save")}}</button>
                <button *ngIf="!isGranted('Pages.Administration.UiCustomization')" (click)="useSystemDefaultSettings()" class="btn btn-metal"> {{l("UseSystemDefaults")}}</button>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <tabset class="tab-container tabbable-line" *ngIf="settings">
                    <tab heading="{{l('UiCustomization_Layout')}}" customClass="m-tabs__item">
                        <form id="LayoutSettingsForm">
                            <div class="m-radio-list m--margin-bottom-20">
                                <label>{{l("UiCustomization_Theme")}}</label>
                                <label class="m-radio" for="Theme_Default">
                                    <input id="Theme_Default" name="Theme" [(ngModel)]="settings.layout.theme" value="default" type="radio" [checked]="settings.layout.theme === 'default'">
                                    {{l("Default")}}
                                    <span></span>
                                </label>
                                <label class="m-radio m-radio--solid m-radio--state-info" for="Theme_Blue">
                                    <input id="Theme_Blue" name="Theme" [(ngModel)]="settings.layout.theme" value="blue" type="radio" [checked]="settings.layout.theme === 'blue'">
                                    {{l("Blue")}}
                                    <span></span>
                                </label>
                                <label class="m-radio m-radio--solid m-radio--state-success" for="Theme_Green">
                                    <input id="Theme_Green" name="Theme" [(ngModel)]="settings.layout.theme" value="green" type="radio" [checked]="settings.layout.theme === 'green'">
                                    {{l("Green")}}
                                    <span></span>
                                </label>
                                <label class="m-radio m-radio--solid m-radio--state-danger" for="Theme_Pink">
                                    <input id="Theme_Pink" name="Theme" [(ngModel)]="settings.layout.theme" value="pink" type="radio" [checked]="settings.layout.theme === 'pink'">
                                    {{l("Pink")}}
                                    <span></span>
                                </label>
                                <label class="m-radio m-radio--solid m-radio--state-warning" for="Theme_Yellow">
                                    <input id="Theme_Yellow" name="Theme" [(ngModel)]="settings.layout.theme" value="yellow" type="radio" [checked]="settings.layout.theme === 'yellow'">
                                    {{l("Yellow")}}
                                    <span></span>
                                </label>
                            </div>

                            <div class="form-group m-form__group">
                                <label for="LayoutType">{{l("UiCustomization_LayoutType")}}</label>
                                <select id="LayoutType" name="LayoutType" class="form-control" [(ngModel)]="settings.layout.layoutType">
                                    <option value="fluid">{{l("UiCustomization_Fluid")}}</option>
                                    <option value="boxed">{{l("UiCustomization_Boxed")}}</option>
                                </select>
                            </div>
                            <div class="form-group m-form__group">
                                <label for="ContentSkin">{{l("UiCustomization_ContentSkin")}}</label>
                                <select id="ContentSkin" name="ContentSkin" class="form-control" [(ngModel)]="settings.layout.contentSkin">
                                    <option value="light2">{{l("UiCustomization_LightGrey")}}</option>
                                    <option value="light">{{l("UiCustomization_White")}}</option>
                                </select>
                            </div>
                        </form>
                    </tab>
                    <tab heading="{{l('UiCustomization_Header')}}" customClass="m-tabs__item">
                        <form id="HeaderSettingsForm">
                            <h5>{{l('UiCustomization_Desktop')}}</h5>
                            <div class="form-group m-form__group">
                                <label class="m-checkbox col-lg-12">
                                    <input type="checkbox" name="DesktopFixedHeader" [(ngModel)]="settings.header.desktopFixedHeader">
                                    {{l("UiCustomization_DesktopFixedHeader")}}
                                    <span></span>
                                </label>
                            </div>
                            <div class="form-group m-form__group">
                                <label for="DesktopMinimizeMode">{{l("UiCustomization_DesktopMinimizeMode")}}</label>
                                <select id="DesktopMinimizeMode" name="DesktopMinimizeMode" class="form-control" [(ngModel)]="settings.header.desktopMinimizeMode">
                                    <option value="">{{l("UiCustomization_None")}}</option>
                                    <option value="hide">{{l("UiCustomization_Hide")}}</option>
                                </select>
                            </div>
                            <div class="form-group m-form__group">
                                <label for="HeaderSkin">{{l("UiCustomization_HeaderSkin")}}</label>
                                <select id="HeaderSkin" name="HeaderSkin" class="form-control" [(ngModel)]="settings.header.headerSkin">
                                    <option value="light">{{l("UiCustomization_Light")}}</option>
                                    <option value="dark">{{l("UiCustomization_Dark")}}</option>
                                </select>
                            </div>
                            <div class="form-group m-form__group">
                                <label class="m-checkbox col-lg-12">
                                    <input type="checkbox" name="DisplaySubmenuArrowDesktop" [(ngModel)]="settings.header.displaySubmenuArrowDesktop">
                                    {{l("UiCustomization_DisplaySubmenuArrowDesktop")}}
                                    <span></span>
                                </label>
                            </div>

                            <h5>{{l('UiCustomization_Mobile')}}</h5>
                            <div class="form-group m-form__group">
                                <label class="m-checkbox col-lg-12">
                                    <input type="checkbox" name="MobileFixedHeader" [(ngModel)]="settings.header.mobileFixedHeader">
                                    {{l("UiCustomization_MobileFixedHeader")}}
                                    <span></span>
                                </label>
                            </div>
                        </form>
                    </tab>
                    <tab heading="{{l('UiCustomization_Menu')}}" customClass="m-tabs__item">
                        <form id="MenuSettingsForm">
                            <div class="form-group m-form__group">
                                <label for="Position">{{l("UiCustomization_MenuPosition")}}</label>
                                <select id="Position" name="Position" class="form-control" [(ngModel)]="settings.menu.position">
                                    <option value="left">{{l("UiCustomization_Left")}}</option>
                                    <option value="top">{{l("UiCustomization_Top")}}</option>
                                </select>
                            </div>
                            <div class="form-group m-form__group">
                                <label for="AsideSkin">{{l("UiCustomization_MenuSkin")}}</label>
                                <select id="AsideSkin" name="AsideSkin" class="form-control" [(ngModel)]="settings.menu.asideSkin">
                                    <option value="light">{{l("UiCustomization_Light")}}</option>
                                    <option value="dark">{{l("UiCustomization_Dark")}}</option>
                                </select>
                            </div>
                            <div class="form-group m-form__group" *ngIf="leftMenuPositionSelected()">
                                <label class="m-checkbox col-lg-12">
                                    <input type="checkbox" name="FixedAside" [(ngModel)]="settings.menu.fixedAside">
                                    {{l("UiCustomization_FixedMenu")}}
                                    <span></span>
                                </label>
                            </div>
                            <div class="form-group m-form__group" *ngIf="leftMenuPositionSelected()">
                                <label class="m-checkbox col-lg-12">
                                    <input type="checkbox" name="AllowAsideMinimizing" [(ngModel)]="settings.menu.allowAsideMinimizing" (ngModelChange)="allowAsideMinimizingChange($event)">
                                    {{l("UiCustomization_AllowAsideMinimizing")}}
                                    <span></span>
                                </label>
                            </div>
                            <div class="form-group m-form__group" *ngIf="leftMenuPositionSelected()">
                                <label class="m-checkbox col-lg-12">
                                    <input type="checkbox" name="DefaultMinimizedAside" [(ngModel)]="settings.menu.defaultMinimizedAside" [(disabled)]="!settings.menu.allowAsideMinimizing">
                                    {{l("UiCustomization_DefaultMinimizedAside")}}
                                    <span></span>
                                </label>
                            </div>
                            <div class="form-group m-form__group" *ngIf="leftMenuPositionSelected()">
                                <label class="m-checkbox col-lg-12">
                                    <input type="checkbox" name="AllowAsideHiding" [(ngModel)]="settings.menu.allowAsideHiding" [(disabled)]="settings.menu.allowAsideMinimizing" (ngModelChange)="allowAsideHidingChange($event)">
                                    {{l("UiCustomization_AllowAsideHiding")}}
                                    <span></span>
                                </label>
                            </div>
                            <div class="form-group m-form__group" *ngIf="leftMenuPositionSelected()">
                                <label class="m-checkbox col-lg-12">
                                    <input type="checkbox" name="DefaultHiddenAside" [(ngModel)]="settings.menu.defaultHiddenAside" [(disabled)]="!settings.menu.allowAsideHiding">
                                    {{l("UiCustomization_DefaultHiddenAside")}}
                                    <span></span>
                                </label>
                            </div>
                            <div class="form-group m-form__group" *ngIf="leftMenuPositionSelected()">
                                <label for="DropdownSubmenuSkin">{{l("UiCustomization_DropdownSubmenuSkin")}}</label>
                                <select id="DropdownSubmenuSkin" name="DropdownSubmenuSkin" class="form-control" [(ngModel)]="settings.menu.dropdownSubmenuSkin">
                                    <option value="inherit">{{l("UiCustomization_Inherit")}}</option>
                                    <option value="light">{{l("UiCustomization_Light")}}</option>
                                    <option value="dark">{{l("UiCustomization_Dark")}}</option>
                                </select>
                            </div>
                            <div class="form-group m-form__group" *ngIf="leftMenuPositionSelected()">
                                <label class="m-checkbox col-lg-12">
                                    <input type="checkbox" name="DropdownSubmenuArrow" [(ngModel)]="settings.menu.dropdownSubmenuArrow">
                                    {{l("UiCustomization_DropdownSubmenuArrow")}}
                                    <span></span>
                                </label>
                            </div>
                        </form>
                    </tab>
                    <tab heading="{{l('UiCustomization_Footer')}}" customClass="m-tabs__item">
                        <form id="FooterSettingsForm">
                            <div class="form-group m-form__group">
                                <label class="m-checkbox col-lg-12">
                                    <input type="checkbox" name="FixedFooter" [(ngModel)]="settings.footer.fixedFooter">
                                    {{l("UiCustomization_FixedFooter")}}
                                    <span></span>
                                </label>
                            </div>
                        </form>
                    </tab>
                </tabset>
            </div>
        </div>
    </div>
</div>
